<template>
  <view>
    <!-- <uni-nav-bar :fixed="true" background-color="#fff" color='#000' status-bar title="入学任务" :border="false" /> -->
    <view class="header">
      入学任务
    </view>
    <view class="task-type">
      <view class="type-box" @click="active = 1;getTaskInfo(1)">
        <view :class="['preschool',active==1?'active':'']">入学前</view>
        <view :class="['type-labal',active==1?'active-labal':'']">
          <image src="/static/jiazi.png" mode=""></image>
        </view>
      </view>
      <view class="type-box" @click="active = 2;getTaskInfo(2)">
        <view :class="['beingReport',active==2?'active':'']">报到中</view>
        <view :class="['type-labal',active==2?'active-labal':'']">
          <image src="/static/jiazi.png" mode=""></image>
        </view>
      </view>
      <view class="type-box" @click="active = 3;getTaskInfo(3)">
        <view :class="['afterReport',active==3?'active':'']">报到后</view>
        <view :class="['type-labal',active==3?'active-labal':'']">
          <image src="/static/jiazi.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="content">
      <view v-show="active === 1">
        <view class="container">
          <scroll-view class="scroll-list" scroll-y="true">
            <block v-for="(item,index) in taskInfo" :key="index">
              <task-box :item='item'></task-box>
            </block>
          </scroll-view>
        </view>
      </view>
      <view v-show="active === 2">
        <view class="container">
          <scroll-view class="scroll-list" scroll-y="true">
            <block v-for="(item,index) in taskInfo" :key="index">
              <task-box :item='item'></task-box>
            </block>
          </scroll-view>
        </view>
      </view>
      <view v-show="active === 3">
        <view class="container">
          <scroll-view class="scroll-list" scroll-y="true">
            <block v-for="(item,index) in taskInfo" :key="index">
              <task-box :item='item'></task-box>
            </block>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        wh: 0,
        active: 1,
        page: 1,
        pagesize: 20,
        taskInfo: []
      };
    },
    onLoad() {
      // const sysInfo = uni.getSystemInfoSync()
      // this.wh = sysInfo.windowHeight
      this.getTaskInfo(1)
    },
    onShow() {
      this.getTaskInfo(this.active)
    },
    methods: {
      async getTaskInfo(i) {
        let that = this
        const obj = {
          page: that.page,
          pagesize: that.pagesize
        }
        if (i === 1) {
          const data = await uni.$http.post(`/users/tasks/page/preschool/${this.userInfo.studentId}`, obj)
          console.log(data.data.data.records);
          this.taskInfo = data.data.data.records
        } else if (i === 2) {
          const data = await uni.$http.post(`/users/tasks/page/beingReport/${this.userInfo.studentId}`, obj)
          console.log(data.data.data.records);
          this.taskInfo = data.data.data.records
        } else if (i === 3) {
          const data = await uni.$http.post(`/users/tasks/page/AfterReport/${this.userInfo.studentId}`, obj)
          console.log(data.data.data.records);
          this.taskInfo = data.data.data.records
        }
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    onReachBottom() {
      this.pagesize += 5
      this.getTaskInfo(this.active)
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .header {
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
  }

  .task-type {
    position: relative;
    display: flex;
    height: 80rpx;
    border-top: 1rpx solid #eee;

    .type-box {
      position: relative;
      width: 33.3%;

      .type-labal {
        position: absolute;
        top: 60rpx;
        left: 90rpx;
        width: 70rpx;
        height: 70rpx;
        opacity: 0;
        z-index: 999;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .active-labal {
        opacity: 1;
        transition: transform 0.5s ease;
        transform: translateY(20rpx);
      }

      .preschool,
      .beingReport,
      .afterReport {
        width: 100%;
        text-align: center;
        line-height: 90rpx;
        font-size: 36rpx;
        font-weight: 700;
        color: #000;

        &.active {
          color: #046404;
        }
      }
    }
  }

  .content {
    width: 90%;
    margin: 40rpx auto;
    box-shadow: 0 0 15rpx #ddd;
  }

  .container {
    position: relative;
    width: 100%;
    margin: 20rpx auto;
    z-index: 0;

    .scroll-list {
      border: 1rpx solid #eee;
      border-radius: 20rpx;
      overflow: hidden;
    }
  }
</style>